<template>
    <div class="login">
        <el-container>
            <el-header>
               <img height="45px" src="../../assets/img/124.jpg" alt="加载失败">
<!--               <img height="45px" src="../../assets/img/124.jpg" alt="加载失败">-->
            </el-header>
            <el-main>
                <el-row class="rowClass">
                    <!-- opacity: 0.5 图片透明度-->
                    <el-col :span="12">
                        <img class="mainImage"
                             src="../../assets/img/123.jpg" alt="加载失败">
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card">
                            <h2 class="loginTitle">QF工资管理系统</h2>
                            <el-form :model="loginForm" :rules="rules" ref="loginForm"  class="demo-loginForm">
                                <el-form-item  prop="username">
                                    <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                                </el-form-item>
                                <el-form-item  prop="password">
                                    <el-input  prefix-icon="el-icon-lock" type="password" show-password v-model="loginForm.password" placeholder="请输入用户密码"></el-input>
                                </el-form-item>

<!--                                <el-form-item  prop="yzm">-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="14">-->
<!--                                            <el-input  v-model="loginForm.yzm" placeholder="请输入验证码"></el-input>-->
<!--                                        </el-col>-->
<!--                                        <el-col :span="10">-->
<!--                                            <img class="yzmClass" @click="getCode()" :src="url" alt="加载失败">-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->

<!--                                </el-form-item>-->

                                <el-form-item>
                                    <el-button class="loginButton" type="primary" @click="login('loginForm')">登 录</el-button>
<!--                                    <el-button type="text" class="resetButton" @click="resetForm('loginForm')">还没账号？点击注册</el-button>-->
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>
                </el-row>

            </el-main>
            <el-footer>
                --------  --------
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            //return里面书写的内容 和 html版本的vue中 data:{}里面书写一致
            //定义初始化变量
            return{
                url:'',
                code:'',
                loginForm:{
                    username:'',
                    password:''
                  //   yzm:'',
                  // code:''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入用户密码', trigger: 'blur' },
                        { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
                    ],
                    yzm: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                }
            }
        },
        //定义事件的方法（函数）
        methods:{
            login(formName){
                this.$refs[formName].validate((valid) => {//true false
                    // if (valid) {
                        //判断验证码输入是否正确
                        // if(this.code.toLowerCase() === this.loginForm.yzm.toLowerCase()){

                            //发送登录的异步请求  域名 ip地址 和端口号 三者有一个不一样就会触发跨域问题
                            this.$axios.get("admin/login",{params:this.loginForm}).then(res=>{

                              if(res.data.code === 200){//res.data-->ResultDTO-->res.data.data-->user
                                   //JSON.stringify(js对象)讲js对象转换为JSON类型string字符串
                                   let userStr =JSON.stringify(res.data.data)

                                   //把登录成功返回的用户信息存储起来 方便登入系统之后的操作以及展示
                                   sessionStorage.setItem("user",userStr)

                                   //路由跳转到主界面
                                   this.$router.push("/home")
                               }
                                else {
                                // this.$message.error(res.data.code)
                                     this.$message.error("登陆失败")
                                }
                            })
                        // }
                        // else {
                        //     this.$notify.error({
                        //         title: '错误',
                        //         message: '验证码输入有误！'
                        //     });
                        //     /*this.$message.error("验证码错误")*/
                        // }

                    // } else {
                    //     this.$message.error("表单校验失败，请检查")
                    //     return false;
                    // }
                });
            },
            //获取验证码的方法
            // getCode(){
            //     this.$axios.get('user/getCode',{responseType:'blob'}).then(res=>{
            //         let blob =  new Blob([res.data])
            //         this.url =  window.URL.createObjectURL(blob)
            //         this.code =  res.headers.code
            //
            //     })
            // }
        },
        //生命周期函数 （当页面加载完毕就会执行的方法）
        created() {
            //页面加载完毕就要调用查询验证码的方法
            // this.getCode()
        }
    }
</script>

<!--scoped属性为了让此属性下的样式只针对本页面起作用 不会影响其他页面样式-->
<style scoped>
    @import url("Login.css");
    .el-header{
        background-color: #ffffff;
        color: #333;
        line-height: 60px;
        display: flex;
        align-items: center;
    }
    .el-footer{
        background-color: #ffffff;
        color: #333;
        text-align: center;
        height: 80px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-main {
        background-color: #dcdee0;
        color: #333;
        line-height: 160px;
        display: flex;
        width: 100%;
    }
    .el-container{
        height: 100%;
    }
    /deep/.el-input__inner{
        height: 45px;
    }
</style>